<template>
    <div class="app-tinfo">
        <div class="left">
            <el-avatar :size="200" :src="avatar"></el-avatar>
        </div>
        <div class="right">
            <div class="info">
                <p>{{name}}</p>
                <p>{{email}}</p>
            </div>
            
        </div>
        
    </div>
</template>
<script setup>
import {useRoute} from 'vue-router'
import {findTeaInfo} from '@/apis/home'
import {onMounted, ref} from 'vue'
const route = useRoute()
const teaid = route.params.id

const avatar = ref()
const name = ref()
const email = ref()

onMounted(()=>{
    findTeacher()
})
const findTeacher = async()=>{
    const res = await findTeaInfo(teaid)
    avatar.value = res.data.data.avatar
    name.value = res.data.data.name
    email.value = res.data.data.email
}

</script>
<style scoped>
.app-tinfo{
    width: 1100px;
    background-color: #fff;
    height: 300px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 30px;
    display: flex;
}
.left{
    margin-right: 15px;
}
.right{
    font-size: 24px;
    /* display: flex;
    flex-direction: column;
    justify-content: center; */
    
}
p{
    margin-top: 20px;
    font-size: 30px;
}
p:nth-child(2){
    margin-top: 50px;
  
}
</style>